<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div class="btns">
            <!-- 一个按钮一个当前路由的路由地址 -->
            <!-- 自定义属性 -->
            <button data-path="/music">音乐</button>
            <button data-path="/news">电影</button>
            <button data-path="/home">娱乐</button>
        </div>
        <div id="content"></div>
        <script>
            const oContent= document.getElementById("content");
            // 想要做一个路由，首先拥有一个路由表
            const routes = [
            {path:"/music" ,component:"我喜欢听妈妈的话"},
            {path:"/news" ,component:"我喜欢看霍元甲"},
            {path:"/home" ,component:"我喜欢迪丽热巴"},
     ];
            // 给所有的按钮绑定点击事件，点击切换url地址
            // 但是切换地址的时候，不能刷新页面
            // h5提供一个history.pushState的一个方法，可以在不刷新的情况下改变浏览器地址
            // 获取所有的按钮绑定点击事件
            const oBths=document.querySelectorAll(".btns button");
            oBths.forEach((item)=>{
                item.onclick=function() {
                    history.pushState(null,null,this.dataset.path);

                    // 没有监听pushState的改变的事件，所以我们在点击事件内，直接把视图展示处理
                    routes.forEach((item)=>{
                        if(item.path===this.dataset.path){
                            oContent.innerHTML=item.component;
                        }
                    })
                }
            });
            // 当使用history模式进行切换路由的时候，我们使用历史记录回退试图没有发生变化
            // 所以我们要监听历史记录的改变，然后更新视图
            // 使用popstate事件可以监听历史记录的改变
            window.onpopstate=function(){
                // 直接通过loacation.pathname拿到当前的路径地址，然后去路由表进行对比，更新视图
                console.log(location.oathname);
                routes.forEach((item)=>{
                    if(item.path===location.pathname){
                        oContent.innerHTML=item.component;
                    }
                })
            }
        </script>
</body>
</html>